<template>
  <div id="app">

    <div class="container" style="width: 100%;height: 100%;">
      <map-test style="width: 50%;margin-top: 100px;min-width: 380px"></map-test>
      <map-line style="width: 50%;margin-top: 100px;min-width: 380px"></map-line>
    </div>

    <div class="container" style="width: 100%;height: 100%;">
      <map-jiangxi style="width: 50%;margin-top: 100px;min-width: 380px"></map-jiangxi>
      <map-china style="width: 50%;margin-top: 100px;min-width: 380px"></map-china>
    </div>

  </div>
</template>

<script>
import MapChina from "@/components/MapChina.vue";
import MapJiangxi from "@/components/MapJiangxi.vue";
import MapTest from "@/components/MapTest.vue";
import MapLine from "@/components/MapLine.vue";

export default {
  name: 'App',
  components: {
    MapChina, MapJiangxi, MapTest, MapLine
  }
}
</script>

<style>
/* 基础样式 */
.container {
  display: flex;
  /* 默认使用flex布局 */
  flex-wrap: wrap;
  /* 允许换行 */
}

/* 媒体查询：针对屏幕宽度小于768px的设备 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    /* 改为垂直布局 */
  }
}
</style>
